<div class="color-picker-window" ng-cloak
     ng-controller="colorpickerController"
     ng-show="CP.visible"
     draggable="{ handle: '.header' }">

  <div class="header">
    <ul>
      <li class="icon_picker" title="Color Picker"
          ng-class="{'active': CP.current_tab == 'picker'}"
          ng-click="CP.current_tab='picker'">picker</li>
      <li class="icon_sliders" title="Color Sliders"
          ng-class="{'active': CP.current_tab == 'sliders'}"
          ng-click="CP.current_tab='sliders'">sliders</li>
      <li class="icon_palette" title="Color Palette"
          ng-class="{'active': CP.current_tab == 'palette'}"
          ng-click="CP.current_tab='palette'">palette</li>
    </ul>

    <div class="cp-close" ng-click="CP.visible = false">
      <i class="icon-cancel-circle"></i>
    </div>
  </div>

  <div ng-if="CP.current_tab == 'picker'">
    <div><input type="text" minicolors="picker_options" ng-model="color.hex"></div>
    <div class="slider-box picker-slider-box">
      <input class="color-slider" type="range" min="0" max="100"
             style="{{ slider_gradient(color.hsla, 'a', 0, 1, 0.2) }}"
             ng-change="update_alpha()"
             ng-model="color.alpha">
    </div>
  </div>

  <ng-include src="'template/color_picker_sliders.html'"></ng-include>

  <div ng-if="CP.current_tab == 'palette'">
    <div style="max-width:240px">
      <span ng-repeat="c in colorpalette"
            ng-click="select_color_from_palette(c)"
            class="palette_box" title="{{::c}}">
          <span class="tranparent_box"></span>
          <span class="color_box" ng-style="{ 'background-color': c }"></span>
      </span>
    </div>
  </div>

  <div class="preview-box">
    <div class="colorpicker-box">
      <div class="tranparent_box"></div>
      <div class="color_box" ng-style="{ 'background-color': Color.parse(CP.rule[CP.selector]) }">
      </div>
    </div>
    <input class="colortext-input" type="text" ng-model="CP.rule[CP.selector]" ng-model-options="{ updateOn: 'blur', debounce: { 'blur': 0 } }">
  </div>

</div>
